<template>
	<view>
		<image class="bgimage" src="../../static/images/bgimage1.jpg"></image>

		<view class="headline"></view>
		<view style="height: 20rpx;"></view>

		<view class="page-list">
			<view class="item-title">
				<view class="left">
					<view class="left-img">
						<image src="/static/images/head.png"></image>
					</view>
					<view class="left-title">
						<view class="name"><text>姓名：</text><text>{{form.sname}}</text></view>
						<view class="site"><text>账号：</text><text>{{form.sid}}</text></view>
					</view>
				</view>
			</view>
			<view style="height: 1rpx;"></view>
			<view class="item" v-for="(item, index) in list" :key="index" @click="onPage(item.name)">

				<view class="left">
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<svg t="1636270783215" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="6981" width="200" height="200">
					<path
						d="M283.648 174.081l57.225-59.008 399.479 396.929-399.476 396.924-57.228-59.004 335.872-337.92z"
						p-id="6982" fill="#b9b9b9"></path>
				</svg>

			</view>
			<view class="popup" v-show="show">
				<view><text>确定退出吗？</text></view>
				<view class="but2"></view>
				<view><button class="agree" @tap="affirm">退出</button></view>
				<view><button class="cancel" @tap="cancell">再看看</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				form: uni.getStorageSync("student"),
				show: false,
				list: [{
						img: '../../static/images/icon/icon01.png',
						name: '关于岭梦空间',
						url: "/pages/my/about",

					},
					{
						img: '../../static/images/icon/icon02.png',
						name: '退 出',
						url: "/"
					},
				],
			};
		},

		methods: {
			onTabItemTap(e) {
				// tab 点击时执行，此处直接接收单击事件
				console.log("点击了刷新导航栏")
			  // location.reload()
				console.log(e)
			},
			
			onLoad(option) {},
			onPage(name) {
				if (name == '退 出')
					this.show = true;
				else
					uni.navigateTo({
						url: "/pages/my/about"
					})
			},
			// 弹窗
			tapPopup(name) {

			},
			cancell() {
				this.show = false;
			},
			affirm() {
				this.show = false;
				uni.clearStorage();
				uni.navigateTo({
					url: "/pages/login/login",
				})
			},
			cancel() {
				uni.navigateTo({
					url: "/pages/mys/mys"
				})
			},

		}
	}
</script>

<style lang="scss">
	.popup {
		height: 390rpx;
		background-color: #fcfcfc;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		text-align: center;
		left: 0;
		right: 0;
		position: fixed;
		bottom: 0rpx;
		z-index: 9999;

		text {
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			font-size: 36rpx;
			padding: 100rpx 0rpx 100rpx 0rpx;
		}

		.but2 {
			text-align: center;
			height: 120rpx;
			bottom: 20rpx;
			position: fixed;
		}

		.agree,
		.cancel {
			text-align: center;
			width: 280rpx;
			height: 86rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
		}

		.agree {
			background-color: #e0e0e0;
			position: fixed;
			left: 10%;
		}

		.cancel {
			color: #ffffff;
			background-color: #108ee9;
			position: fixed;
			right: 10%;
		}
	}

	// page{
	// 	background-color: #ffffff;
	// }

	.bgimage {
		margin-top: 17%;
		background-repeat: no-repeat;
		position: absolute;
		z-index: -1;
		background-size: 100%;
		width: 100%;
		min-height: 90%;
		max-height: 90%;
		opacity: 0.6;

	}

	.headline {
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		background-color: #007AFF;
	}

	.page-list {
		.item-title {
			margin: 25rpx;
			border-radius: 30rpx;
			padding: 15rpx 25rpx;
			border: #00c4ff solid 1rpx;
			background-color: #ffffff;
			display: flex;
			height: 220rpx;
			align-items: center;
			justify-content: space-between;

			.name text {
				font-size: 32rpx;
				font-weight: 600;
			}

			.site text {
				color: #787878;
			}

			.left {
				display: flex;
				align-items: center;

				&-title {
					margin-left: 25rpx;
					height: 90rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				&-img {
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 60rpx;
					}
				}

			}
		}

		.item {
			margin: 25rpx;
			border-radius: 30rpx;
			padding: 15rpx 25rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.item {
			border-radius: 30rpx;
			border: #00c4ff solid 1rpx;
			background-color: #ffffff;
			margin: 25rpx 25rpx;
			padding: 25rpx 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 25rpx;
				}

				text {
					font-size: 30rpx;
					color: #616161;
				}

			}
		}
	}

	.icon {
		width: 45rpx;
		height: 50rpx;
	}
</style>
